<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="head">
        <style type="text/css">
            .imagebox a{
                margin-left:10px;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">LightBox</h1>
        <div class="entry">
            <p>LightBox is a modal overlay component to display images, inline content and iframes.</p>    	

            <h3>Images</h3>
            <p:lightBox styleClass="imagebox" id="lighbox1">
                <h:outputLink value="../images/sopranos/sopranos1.jpg" title="Sopranos 1">
                    <h:graphicImage value="/images/sopranos/sopranos1_small.jpg" id="sopranos1_small"/>
                </h:outputLink>

                <h:outputLink value="../images/sopranos/sopranos2.jpg" title="Sopranos 2">
                    <h:graphicImage value="/images/sopranos/sopranos2_small.jpg" id="sopranos2_small"/>
                </h:outputLink>

                <h:outputLink value="../images/sopranos/sopranos3.jpg" title="Sopranos 3">
                    <h:graphicImage value="/images/sopranos/sopranos3_small.jpg" id="sopranos3_small"/>
                </h:outputLink>

                <h:outputLink value="../images/sopranos/sopranos4.jpg" title="Sopranos 4">
                    <h:graphicImage value="/images/sopranos/sopranos4_small.jpg" id="sopranos4_small"/>
                </h:outputLink>
            </p:lightBox>

            <h3>Inline</h3>
            <p:lightBox id="lighbox2">
                <h:outputLink value="#" id="lighbox2_link">
                    <h:outputText value="Video Content"/>
                </h:outputLink>

                <f:facet name="inline">
                    <p:media value="http://vimeo.com/moogaloop.swf?clip_id=18079550"  width="400" height="225" player="flash"/>
                </f:facet>
            </p:lightBox>
            
            <h3>IFrame</h3>
            <p:lightBox iframe="true" id="lighbox3">
                <h:outputLink value="http://www.primefaces.org" title="PrimeFaces HomePage" id="lightboxIframe_link">
                    <h:outputText value="PrimeFaces HomePage"/>
                </h:outputLink>
            </p:lightBox>
            
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="lightBox.xhtml">
                    <pre name="code" class="xml">
&lt;h3&gt;Images&lt;/h3&gt;
&lt;p:lightBox styleClass="imagebox"&gt;
    &lt;h:outputLink value="../images/sopranos/sopranos1.jpg" title="Sopranos 1"&gt;
        &lt;h:graphicImage value="/images/sopranos/sopranos1_small.jpg"/&gt;
    &lt;/h:outputLink&gt;

    &lt;h:outputLink value="../images/sopranos/sopranos2.jpg" title="Sopranos 2"&gt;
        &lt;h:graphicImage value="/images/sopranos/sopranos2_small.jpg" /&gt;
    &lt;/h:outputLink&gt;

    &lt;h:outputLink value="../images/sopranos/sopranos3.jpg" title="Sopranos 3"&gt;
        &lt;h:graphicImage value="/images/sopranos/sopranos3_small.jpg"/&gt;
    &lt;/h:outputLink&gt;

    &lt;h:outputLink value="../images/sopranos/sopranos4.jpg" title="Sopranos 4"&gt;
        &lt;h:graphicImage value="/images/sopranos/sopranos4_small.jpg"/&gt;
    &lt;/h:outputLink&gt;
&lt;/p:lightBox&gt;

&lt;h3&gt;Inline&lt;/h3&gt;
&lt;p:lightBox&gt;
    &lt;h:outputLink value="#"&gt;
        &lt;h:outputText value="Video Content"/&gt;
    &lt;/h:outputLink&gt;

    &lt;f:facet name="inline"&gt;
        &lt;p:media value="http://vimeo.com/moogaloop.swf?clip_id=18079550"  width="400" height="225" player="flash"/&gt;
    &lt;/f:facet&gt;
&lt;/p:lightBox&gt;

&lt;h3&gt;IFrame&lt;/h3&gt;
&lt;p:lightBox iframe="true"&gt;
    &lt;h:outputLink value="http://www.primefaces.org" title="PrimeFaces HomePage"&gt;
        &lt;h:outputText value="PrimeFaces HomePage"/&gt;
    &lt;/h:outputLink&gt;
&lt;/p:lightBox&gt;
                    </pre>
                </p:tab>
            </p:tabView>
        </div>

    </ui:define>
</ui:composition>
